<template>
  <div class="map-popup-container" :style="{width: width + 'px',display: visible ? 'block' : 'none'}">
    <div class="map-popup-header">
      <div class="left">
        <a-icon :type="icon"/>
        <span>{{title}}</span>
      </div>
      <div class="right">
        <a-icon type="close" class="handler"
                @click="visible = false"/>
      </div>
    </div>

    <div class="map-popup-content" id="map-popup-content-box">
      <slot></slot>
    </div>
  </div>
</template>

<script>
  export default {
    name: "MapPopup",
    props: {
      popupCloseCallback: {
        type: Function,
        default: () => {
        }
      }
    },
    data() {
      return {
        visible: false,
        icon: 'tool',
        title: '测试一下',
        width: 260,
        previousTargetId: undefined
      }
    },
    methods: {
      toggle() {
        this.visible = !this.visible
        if (!this.visible) {
          this.popupCloseCallback()
        }
      },
      showFull(icon, title, targetId, width = 256) {
        this.icon = icon
        this.title = title
        this.width = width
        if (this.previousTargetId) {
          const previousBox = document.getElementById(this.previousTargetId)
          previousBox.style.display = 'none'
          this.visible = false
          this.popupCloseCallback()
        }
        const currentBox = document.getElementById(targetId)
        currentBox.style.display = 'block'
        this.previousTargetId = targetId
        this.visible = true
      },
      closePopup() {
        this.visible = false
        this.popupCloseCallback()
      }
    }
  }
</script>

<style lang="scss" scoped>
  //@import '@/assets/less/comment-style.less';

  .map-popup-container {
    position: absolute;
    right: 0;
    height: 200px;
    border-radius: 5px;
  }

  .map-popup-header {
    background-color: #1890ff;
    height: 36px;
    padding: 8px;
    font-size: 14px;
    color: #FFFFFF;
    border-radius: 2px;
  }

  .map-popup-header .left {
    float: left;

    span {
      margin-left: 5px;
    }
  }

  .map-popup-header .right {
    float: right;
  }

  .map-popup-header .handler {
    cursor: pointer;
    font-size: 16px;
    /*font-weight: bold;*/
    /*color: #434343;*/
  }

  .map-popup-content {
    background-color: #FFFFFF;
    padding: 10px;
  }
</style>
